<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>gRaphaël Line Charts</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Dmitry Baranovskiy">
        <meta name="description" content="Charting JavaScript Library">
        <link rel="stylesheet" href="demo.css" type="text/css" media="screen" charset="utf-8">
        <link rel="stylesheet" href="demo-print.css" type="text/css" media="print" charset="utf-8">
        <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
        <script src="g.raphael.js" type="text/javascript" charset="utf-8"></script>
        <script src="g.line.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            window.onload = function () {
                var r = Raphael("holder");
                r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
                
                var x = [], y = [], y2 = [], y3 = [];
                for (var i = 0; i < 1e6; i++) {
                    x[i] = i * 10;
                    y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3;
                    y2[i] = (y2[i - 1] || 150) + (Math.random() * 7) - 3.5;
                    y3[i] = (y3[i - 1] || 300) + (Math.random() * 7) - 4;
                }

                r.g.text(160, 10, "Simple Line Chart (1000 points)");
                r.g.text(480, 10, "shade = true (10,000 points)");
                r.g.text(160, 250, "shade = true & nostroke = true (1,000,000 points)");
                r.g.text(480, 250, "Symbols, axis and hover effect");

                r.g.linechart(10, 10, 300, 220, x, [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)]).hoverColumn(function () {
                    this.set = r.set(
                        r.g.disc(this.x, this.y[0]),
                        r.g.disc(this.x, this.y[1]),
                        r.g.disc(this.x, this.y[2])
                        );
                }, function () {
                    this.set.remove();
                });
                r.g.linechart(330, 10, 300, 220, x, [y.slice(0, 1e4), y2.slice(0, 1e4), y3.slice(0, 1e4)], {shade: true});
                r.g.linechart(10, 250, 300, 220, x, [y, y2, y3], {nostroke: true, shade: true});
                var lines = r.g.linechart(330, 250, 300, 220, [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], {nostroke: false, axis: "0 0 1 1", symbol: "o", smooth: true}).hoverColumn(function () {
                    this.tags = r.set();
                    for (var i = 0, ii = this.y.length; i < ii; i++) {
                        this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{fill: "#fff"}, {fill: this.symbols[i].attr("fill")}]));
                    }
                }, function () {
                    this.tags && this.tags.remove();
                });
                lines.symbols.attr({r: 3});
                // lines.lines[0].animate({"stroke-width": 6}, 1000);
                // lines.symbols[0].attr({stroke: "#fff"});
                // lines.symbols[0][1].animate({fill: "#f00"}, 1000);
            };
        </script>
    </head>
    <body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
        <div id="holder"></div>
        <p>
            Demo of <a href="http://g.raphaeljs.com/">gRaphaël</a> JavaScript library.
        </p>
    </body>
</html>
